<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload,
		onHide
	} from '@dcloudio/uni-app';
	import {
		getJuZiListApi,
		submitStudyJuziApi
	} from '/api/request.js';
	const props = defineProps({});
	onMounted(() => {});
	let platform = uni.getStorageSync('platform');
	const center = ref(null)
	const goback = async () => {
		console.log(query.value);
		if (query.value.buyao || !list.value || list.value.length < 1) {
			uni.navigateBack()
		} else {
			center.value.open('center');
		}
	};
	const query = ref({
		sc_id: '',
		page: 1,
		la: true,
		trigger: false,
		total: 1
	});
	const fetchList = async (type = true) => {
		try {
			uni.showLoading({
				mask: true
			});
			let res = await getJuZiListApi(query.value);
			if (!type || !list.value) {
				list.value = [];
			}
			console.log(res);
			res.data.list.map((item) => {
				list.value.push(item);
			});
			query.value.total = res.data.count;
			if (query.value.page * 10 >= query.value.total) {
				query.value.la = false;
			} else {
				query.value.la = true;
			}
			uni.hideLoading();
		} catch (error) {
			console.log(error);
		}
	};
	const list = ref(null);
	onLoad(async (e) => {
		query.value.sc_id = e.id;
		if (e.buyao) {
			query.value.buyao = e.buyao
		}
		fetchList()
	});
	const handlePullDownRefresh = () => {
		if (query.value.la) {
			query.value.page += 1;
			fetchList(true);
		}
	};
	const handleReachBottom = () => {
		query.value.page = 1;
		query.value.trigger = true;
		fetchList(false).finally(() => (query.value.trigger = false));
	};
	const stautss = ref({
		id: '',
		num: 0
	})
	const play = (id) => {
		if (stautss.value.id == id) {
			stautss.value.num == 2 ? stautss.value.num = 1 : stautss.value.num++
		} else {
			stautss.value.id = id
			stautss.value.num = 1
		}
	}
	const returnClass = (id) => {
		if (id == stautss.value.id && stautss.value.num == 1) return 'active'
		if (id == stautss.value.id && stautss.value.num == 2) return 'default'
	}
	const tijiao = async () => {
		let res = await submitStudyJuziApi(query.value)
		uni.showToast({
			title: res.msg,
			icon: 'none'
		})
		setTimeout(() => {
			center.value.close()
			center.value = null
			uni.navigateBack()
		}, 800)
	}
	const huiqu = () => {
		center.value.close()
		uni.navigateBack()
	}
</script>

<template>
	<view class="wrap uni-col" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 演讲词汇 </view>
			<image class="left" style="opacity: 0" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<scroll-view v-if="list && list.length" class="body" :scroll-y="true">
			<view class="item uni-col" v-for="(item,index) in list" :key="index" @click="play(item.id)"
				:class="returnClass(item.id)">
				<view class="title-wrap uni-row">
					<view class="suoyin">{{index+1}}.</view>
					<view class="nei">
						{{item.eng_name}}
					</view>
				</view>
				<view class="label">
					{{item.cn_name}}
				</view>
			</view>
		</scroll-view>
		<view class="nothing" v-if="list && list.length < 1">
			<image src="/static/img/nothing.png" class="img"></image>
			<view class="label"> 哎呀，这里什么内容都没有 </view>
		</view>
	</view>
	<uni-popup ref="center">
		<view class="wai">
			<view class="title"> 温馨提示 </view>
			<view class="label"> 是否将整篇加入学习记录？ </view>
			<view class="footer uni-row">
				<view class="fou bt" @click="huiqu"> 否 </view>
				<view class="shi bt" @click="tijiao"> 是 </view>
			</view>
		</view>
	</uni-popup>
</template>

<style scoped lang="less">
	.wai {
		width: 606rpx;
		height: 378rpx;
		background: #f4eeff;
		border-radius: 64rpx;
		padding: 48rpx 96rpx;
		text-align: center;
		color: #333333;

		.title {
			font-size: 32rpx;
		}

		.label {
			font-size: 28rpx;
			margin: 36rpx 0 56rpx;
		}

		.footer {
			justify-content: space-between;

			.bt {
				width: 184rpx;
				height: 68rpx;
				font-size: 24rpx;
				line-height: 68rpx;
				border-radius: 36rpx;
			}

			.fou {
				color: #9561f3;
				border: 2rpx solid #9561f3;
			}

			.shi {
				background: #9561f3;
				color: #fff;
			}
		}
	}

	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-left: 32rpx;
			}
		}

		.body {
			flex: 1;
			padding: 0 28rpx;

			.item {
				justify-content: space-around;
				width: 694rpx;
				height: 262rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				padding: 70rpx 28rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.title-wrap {
					color: #B3B3B3;

					.suoyin {
						width: 20rpx;
						margin-right: 20rpx;
					}
				}

				.label {
					transition: 0.3s all;
					opacity: 0;
					color: #333333;
					padding-left: 40rpx;
				}

				&.active {
					.title-wrap {
						color: #333333;
					}

					.label {
						opacity: 1;
					}
				}

				&.default {
					.title-wrap {
						.nei {
							opacity: 0;
						}
					}
				}
			}
		}
	}
</style>